// src/ImageSwitcher.tsx
import React, { useState, useEffect } from 'react';

const images = [
    'https://ts4.cn.mm.bing.net/th?id=ORMS.f003073577198e543d9cca3047f055a1&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.25&p=0',
    'https://ts4.cn.mm.bing.net/th?id=ORMS.57538e629cc7de4232953c9d7ce358db&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.25&p=0',
    'https://jx.cdn.qhstatic.com/cimg.png?size=300x175&name=%E6%80%A7%E5%88%AB%E4%BB%BF%E7%9C%9F%E6%9C%BA%E5%99%A8%E4%BA%BA%E5%87%BA%E7%8E%B0%2C%E6%9C%AA%E6%9D%A5%E6%88%91%E4%BB%AC%E6%98%AF%E5%90%A6%E8%BF%98%E4%BC%9A%E9%9C%80%E8%A6%81%E5%BC%82%E6%80%A7%3F&button=&memo=%E6%89%93%E9%80%A0%E6%9C%AA%E6%9D%A5%E5%AE%B6%E5%B1%85%EF%BC%8C%E5%A4%9A%E5%8A%9F%E8%83%BD%E6%99%BA%E8%83%BD%E6%9C%BA%E5%99%A8%E4%BA%BA%E7%AD%89%E4%BD%A0%E5%B8%A6%E5%9B%9E%E5%AE%B6&timg=https%3A%2F%2Fp3.ssl.qhimgs0.com%2Fdr%2F360_200_60%2Ft01d13582fe52687955.jpg&tid=130923&ver=2.0.50&imageAuth=29b06afe849bb2404835051c2eac345a',
    'https://ts4.cn.mm.bing.net/th?id=ORMS.6e6764f1edc16e0a002ce4d8e5a53746&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.25&p=0'
];

const ImageSwitcher: React.FC = () => {
    const [imageIndex, setImageIndex] = useState(0);

    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
        const { clientX, currentTarget } = event;
        const { left, width } = currentTarget.getBoundingClientRect();
        
        // 计算相对于容器的百分比
        const percentage = (clientX - left) / width;

        console.log('percentage:', percentage);  // 添加调试信息

        // 根据百分比设置新索引
        let newIndex = imageIndex;
        if (percentage < 0.25) {
            newIndex = 0;  // 第一张
        } else if (percentage < 0.5) {
            newIndex = 1;  // 第二张
        } else if (percentage < 0.75) {
            newIndex = 2;  // 第三张
        } else {
            newIndex = 3;  //第四张
        }
        
        if (newIndex !== imageIndex) {
            setImageIndex(newIndex);
            console.log('New Image Index:', newIndex); // 添加调试信息
        }
    };

    const handleMouseLeave = () => {
        setImageIndex(0); // 移出图片区域时返回第一张图片
        console.log('Mouse left the image, resetting index to 0');
    };

    return (
        <div
            className="image-container"
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave} // 添加移出事件处理
            style={{ width: '300px', height: '200px', position: 'relative', overflow: 'hidden' }}
        >
            <img
                src={images[imageIndex]}
                alt="切换图片"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
            <div
                className="progress-bar"
                style={{
                    position: 'absolute',
                    bottom: '0',
                    left: '0',
                    height: '5px',
                    width: `${(imageIndex / (images.length - 1)) * 100}%`,
                    backgroundColor: 'rgba(255, 0, 0, 0.5)',
                    transition: 'width 0.1s',
                }}
            />
        </div>
    );
};

export default ImageSwitcher;